<template>
  <view class="school-intro-page">
    <!-- 顶部轮播图（banner） -->
	<view class="tab-bar">
        <view v-for="(tab, i) in tabs" 
              :key="i" 
              class="tab-item"
              :class="{active: activeTab === tab.id}"
              @click="switchTab(tab.id)">
          <text>{{tab.title}}</text>
          <view class="indicator"></view>
        </view>
    </view>
	<u-swiper :list="bannerList" height="220"></u-swiper>
    <!-- 学校基础信息（Logo + 名称 + 标语） -->
    <view class="school-header" style=" padding: 25rpx 0;">
      <image class="school-logo" :src="Students.logo"></image>
      <view class="school-info">
        <text class="school-name">{{ Students.name }}</text>
        <view class="school-slogan" style="margin-top: 20rpx;">{{ Students.title }}</view>
      </view>
    </view>
	<view style="margin-bottom: 35rpx;">
		<image :src="Students.img" style="width: 100%;"></image>
	</view>
    <!-- 学校资质 & 联系方式 -->
    <view class="school-meta">
      <view class="meta-item">
        <text class="meta-label">资质：</text>
        <text class="meta-value">{{ Students.qing }}</text>
      </view>
	  <view class="meta-item" v-if="Students.zhizi">
	    <view class="meta-label">办学资质</view>
		<image @click="previewImage(Students.zhizi)" style="width: 100%;" :src="Students.zhizi" mode="widthFix"></image>
	  </view>
      <view class="meta-item">
        <text class="meta-label">电话：</text>
        <text class="meta-value">{{ Students.mobile }} / {{ Students.phone }}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">老师：</text>
        <text class="meta-value">{{ Students.username }}</text>
      </view>
      <view class="meta-item">
        <text class="meta-label">地址：</text>
        <text class="meta-value">{{ Students.address }}</text>
      </view>
    </view>

    <!-- 学校简介 -->
    <view class="section" style="margin-top: 30rpx;">
      <text class="section-title">学校简介</text>
      <view class="section-desc" >{{ Students.qing }}</view>
    </view>
	<view class="section" style="margin-top: 30rpx;">
	  <text class="section-title">学校师资</text>
	  <view  style="margin-top: 25rpx;">
		<u-scroll-list>
		  <view v-for="(item, index) in imageCHu(Students.shizi)" :key="index">
			<image mode="widthFix" style="border-radius: 20rpx;margin-right: 20rpx;" :src="item" @click="previewImage(item,index)" ></image>
		  </view>
		</u-scroll-list>
		  <!-- <image style="width: 100%;" mode="widthFix" v-for="(item,index) in imageCHu(Students.shizi)"></image> -->
	  </view>
	</view>

    <!-- 核心优势（tes 内容） -->
    <view class="section" style="margin-top: 30rpx;">
      <text class="section-title">核心优势</text>
      <view class="advantage-list">
        <view class="advantage-item" >
          <text class="item-dot">•</text>
          <text class="item-text">{{ Students.tes }}</text>
        </view>
      </view>
    </view>

    <!-- 办学理念（li 内容） -->
    <view class="section" style="margin-top: 30rpx;">
      <text class="section-title">办学理念</text>
      <view class="concept-list">
        <view class="concept-item" >
          <text class="concept-text">{{ Students.li }}</text>
        </view>
      </view>
    </view>

    <!-- 更多介绍（content、jie、bei 等） -->
    <view class="section" style="margin-top: 30rpx;">
      <text class="section-title">关于我们</text>
      <view class="section-desc">{{ Students.content }}</view>
      <text class="section-desc"  style="padding-left: 45rpx;">{{ Students.jie }}</text>
      <text class="section-desc"  style="padding-left: 45rpx;">{{ Students.bei }}</text>
    </view>
	<view class="section" style="margin-top: 30rpx;padding-bottom: 20rpx;">
	  <text class="section-title">班型</text>
	  <view  style="margin-top: 25rpx;">
		<image style="border-radius: 10rpx; width: 100%;"  @click="previewImage(Students.ban_z)" mode="widthFix" :src="Students.ban_z"></image>
		<image style="border-radius: 10rpx;width: 100%;"  @click="previewImage(Students.ban_f)" mode="widthFix" :src="Students.ban_f"></image>
		<image style="border-radius: 10rpx;width: 100%;"  @click="previewImage(Students.ban_wen)" mode="widthFix" :src="Students.ban_wen"></image>
	  </view>
	</view>
	<view class="section" style="margin-top: 30rpx;padding-bottom: 100rpx;">
	  <text class="section-title">教学答疑示例</text>
	  <view  style="margin-top: 25rpx;">
		  <image v-for="(item,index) in imageCHu(Students.jiaoxue)" :key="index" style="border-radius: 10rpx; width: 100%;margin-right: 20rpx;"  @click="previewImage(item)" mode="widthFix" :src="item"></image>
	  </view>
	</view>

    <!-- 底部行动区（可扩展咨询、报名等按钮） -->
    <view class="action-bar">
      <button class="action-btn" @click="handleConsult">在线咨询</button>
      <button class="action-btn" @click="handleApply">立即报名</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	  bannerList:[],
	  Students:{},
     
    }
  },
  computed: {
    // 处理 banner 为数组
    // bannerList() {
    //   return this.banner.split(',');
    // },
    // 处理 tes 为数组（按换行拆分）
    // tesList() {
    //   return this.tes.split('↵').filter(item => item);
    // }
  },
   onLoad(option) {
    	uni.setNavigationBarTitle({
    		title:option.name
    	})
  	this.getStudents(option.id)
    },
    methods: {
		imageCHu(img){
			let list = img.split(',')
			console.log('list',list)
			let imgUrl = []
			list.forEach(item => {
				if(item){
					imgUrl.push(item)
				}
			})
			return imgUrl;
		},
		previewImage(url,index){
			console.log('dsssss',index)
			uni.previewImage({
				urls:[url],
				current:index?JSON.stringify(index):"1"
			})
		},
	// 切换标签
	switchTab(tabId) {
	  this.activeTab = tabId
	  if (tabId === 'colleges') {
	    setTimeout(() => {
	      this.calculateScrollHeight()
	    }, 50)
	  }
	},
  	async getStudents(id){
  		const res = await this.$api.get('/StudentsSchool/get',{id:id},true)
  		if(res.data.code === 200){
  			this.Students = res.data.data
  			let data = JSON.parse(res.data.data.banner)
			console.log()
  			this.bannerList = data
  			console.log('ssssss',this.Students,JSON.parse(this.Students.banner))
  		}
  	},
    handleConsult() {
      // 跳转咨询页面或唤起客服
      uni.showModal({
        title: '在线咨询',
        content: '可拨打 ' + this.Students.phone + ' 联系'+this.Students.username,
		confirmText:'立即拨打',
        showCancel: true,
		success: (red) => {
			if(red.confirm){
				uni.makePhoneCall({
					phoneNumber:this.Students.phone,
						success: (res) => {
							console.log('拨打电话成功')
						}
				})
			}
		}
      });
	  
    },
    handleApply() {
      // 跳转报名页面或展示表单
      uni.navigateTo({
        url: '/pages/apply/apply' // 假设报名页路径，需实际创建
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/* 页面基础样式 */
.tab-bar {
      display: flex;
      border-bottom: 1px solid rgba(0,0,0,0.05);
      padding: 0 20px;
      
      .tab-item {
        flex: 1;
        text-align: center;
        padding: 15px 0;
        position: relative;
        
        text {
          font-size: 16px;
          color: #666;
          transition: all 0.3s;
        }
        
        .indicator {
          position: absolute;
          bottom: -1px;
          left: 50%;
          transform: translateX(-50%);
          width: 0;
          height: 3px;
          background: linear-gradient(to right, #FF5C8D, #764ba2);
          transition: all 0.3s;
          border-radius: 3px;
        }
        
        &.active {
          text {
            color: #333;
            font-weight: bold;
          }
          
          .indicator {
            width: 50%;
          }
        }
      }
    }
.school-intro-page {
  padding: 16rpx;
  background-color: #fff;
  font-size: 28rpx;
  color: #333;
  line-height: 38rpx;
}

/* 轮播图 */
.banner-swiper {
  width: 100%;
  height: 400rpx;
  margin-bottom: 24rpx;
}
.banner-img {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

/* 学校 header（Logo + 名称） */
.school-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.school-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-right: 16rpx;
}
.school-info {
  flex: 1;
}
.school-name {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 8rpx;
}
.school-slogan {
  font-size: 26rpx;
  color: #666;
}

/* 学校 meta 信息（资质、电话等） */
.school-meta {
  margin-bottom: 24rpx;
}
.meta-item {
  margin-bottom: 12rpx;
  line-height: 44rpx;
}
.meta-label {
  font-weight: bold;
  color: #007aff;
}

/* 模块标题 */
.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  border-left: 8rpx solid #007aff;
  padding-left: 12rpx;
  margin: 32rpx 0 16rpx;
}

/* 段落文本 */
.section-desc {
  line-height: 44rpx;
  color: #666;
  text-indent: 48rpx; /* 首行缩进 */
}

/* 优势列表 */
.advantage-list {
  padding-left: 48rpx;
}
.advantage-item {
  line-height: 44rpx;
  margin-bottom: 8rpx;
}
.item-dot {
  color: #007aff;
  margin-right: 8rpx;
}

/* 办学理念列表 */
.concept-list {
  padding-left: 48rpx;
}
.concept-item {
  line-height: 44rpx;
  margin-bottom: 8rpx;
}

/* 底部行动栏 */
.action-bar {
  display: flex;
  justify-content: space-around;
  margin-top: 32rpx;
  position: fixed;
  z-index: 100;
  bottom: 35rpx;
  width: 95%;
}
.action-btn {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #007aff;
  color: #fff;
  border-radius: 12rpx;
  font-size: 30rpx;
}
</style>